<template>
  <div class="chart"></div>
</template>

<script setup name="PercentagePie">
// 百分比环状图
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { echartChangeColors } from '@/components/Charts/style.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        title: '已执行',
        percentage: 25,
        color: 0,
        intro: ['在用数量 21', '在用占比40%']
      }
    }
  }
})

let chartInstance = null

function chartInit() {
  // console.log(echartChangeColors[props.options.color])
  chartInstance = echarts.init(proxy.$el, 'macarons')
  chartInstance.setOption({
    title: {
      text: props.options.percentage + '%',
      textStyle: {
        color: '#6e6e6e',
        fontSize: 18
      },
      subtext: props.options.title,
      subtextStyle: {
        color: '#6E6E6E',
        fontSize: 12
      },
      itemGap: 5, // 主副标题距离
      left: 'center',
      top: '38%'
    },
    angleAxis: {
      max: 100, // 满分
      clockwise: true, // 逆时针
      // 隐藏刻度线
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      // 隐藏刻度线
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    polar: {
      center: ['50%', '50%'],
      radius: '120%' // 图形大小
    },
    series: [
      {
        type: 'bar',
        data: [
          {
            name: '占比',
            value: props.options.percentage,
            itemStyle: {
              // 自定义渐变色
              // normal 即将被废弃了，但是在外面直接写color，不起作用
              normal: {
                color: echartChangeColors[props.options.color]
              },
              borderColor: '#fff',
              borderWidth: 10
            }
          }
        ],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 10,
        barGap: '-100%', // 两环重叠
        z: 2
      },
      {
        // 灰色环
        type: 'bar',
        data: [
          {
            value: 100,
            itemStyle: {
              color: '#e2e2e2',
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 5,
              shadowOffsetY: 2
            }
          }
        ],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 10,
        barGap: '-100%', // 两环重叠
        z: 1
      }
    ]
  })
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})

watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
